<template>
  <div class="conversation">
    <div class="title">
      <span class="iconfont icon-left " @click="col()"></span>
    </div>
    <div class="contentBody">
      <ul>
        <li v-for="(item,index) in infomation" :key="index" :style="{'text-align':item.name === 'sd'?'left':'right'}">
          <img class="sdAvator" v-if="item.name === 'sd'" :src="item.avator" alt="">
          <div class="text">
            <span>{{item.info}}</span>
          </div>
          <img class="meAvator" v-if="item.name === 'me'" :src="item.avator" alt="">
        </li>
      </ul>
    </div>
    <div class="bottomInput">
      <input type="text" v-model="textInfo">
      <button class="buttons" @click="sendMsg()">发送</button>
    </div>
  </div>
</template>
<script>
export default {
  data: () => ({
    textInfo: "",
    infomation: [
      {
        avator:
          "http://img0.imgtn.bdimg.com/it/u=3256100974,305075936&fm=26&gp=0.jpg",
        info: "你好",
        name: "sd"
      },
      {
        avator:
          "http://img0.imgtn.bdimg.com/it/u=3256100974,305075936&fm=26&gp=0.jpg",
        info:
          "你好,欢迎来到按时发生大发噶啥地噶啥地方噶啥地方噶啥地方噶啥地方方哈士大夫士大夫客服热线",
        name: "sd"
      },
      {
        avator:
          "http://img0.imgtn.bdimg.com/it/u=3256100974,305075936&fm=26&gp=0.jpg",
        info: "请问有什么可以帮你的?",
        name: "sd"
      },
      {
        avator:
          "http://img0.imgtn.bdimg.com/it/u=3256100974,305075936&fm=26&gp=0.jpg",
        info: "你好",
        name: "sd"
      },
      {
        avator:
          "http://img0.imgtn.bdimg.com/it/u=3256100974,305075936&fm=26&gp=0.jpg",
        info: "你好,在吗?",
        name: "sd"
      }
    ]
  }),
  mounted() {},
  methods: {
    col(){
      this.$emit("col")
    },
    sendMsg() {
      this.infomation.push({
        avator:
          "http://img0.imgtn.bdimg.com/it/u=1972224372,2850391150&fm=26&gp=0.jpg",
        info: this.textInfo,
        name: "me"
      });
      this.textInfo = ""
    }
  }
};
</script>
<style lang="scss">
.conversation {
  position: relative;
  background: #f8f8f8;
  width: 100%;
  min-height: 440px;
  margin: 0;
  padding: 0;
  p {
    margin: 0;
    padding: 0;
  }
  .title {
    height: 50px;
    line-height: 50px;
    border-bottom: 1px solid #ccc;
    span{
      margin-left:10px;
    }
  }
  .contentBody {
    color: #333;
    font-size: 14px;
    ul {
      margin: 0;
      padding: 0;
      position: relative;
      li {
        text-align: left;
        padding: 4px 10px;
        list-style: none;
        display: flex;
        align-items: center;
        .sdAvator {
          display: inline-block;
          margin: 0 8px 0 0;
          width: 36px;
          height: 36px;
          border-radius: 50%;
        }
        .meAvator {
          display: inline-block;
          margin: 0 0 0 8px;
          width: 36px;
          height: 36px;
          border-radius: 50%;
        }
        .text {
          display: inline-block;
          width: 85%;
          span {
            display: inline-block;
            border: 1px solid #000;
            padding: 5px 8px;
            border-radius: 6px;
            border: 1px solid #68b6e6;
          }
        }
      }
    }
  }
  .bottomInput {
    margin: 0;
    padding: 0;
    height: 50px;
    background: #fff;
    position: absolute;
    bottom: 0;
    left: 0;
    min-width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    input {
      border: none;
      height: 34px;
      line-height: 34px;
      border-radius: 6px;
      width: 68%;
      padding: 0 5px;
      outline: none;
      background: #e5e5e5;
      color:#666
    }
    .buttons {
      outline: none;
      border-radius: 6px;
      border: none;
      height: 34px;
      width: 18%;
      margin: 0 5px;
      background:#3ca2e1;
      color:#fff
    }
  }
}
</style>
